<template>
	<div id="shen">
		<div style="margin-top:30px;width:90%;margin-left:40px;">
		</div>
			<div style="margin-top:30px;width:80%;margin-left:10px;margin-right:40px;float:left;" >
				<el-row :span="24" >
						<el-col :span="8" style='width:320px;margin-left:300px;'    >
						<el-card  style="margin:15px;background:#4db6ac;" >
							<h5><span style="color:rgb(247,166,0);">{{Unauthorized.name}} </span>授权之后可获取个人信息</h5>
							<div>
								<div style="width:46%;height:40%; margin:0 auto;">
									<img :src="Unauthorized.logoUrl" class="image">
								</div>
								<div style="float:left;line-height:45px">
									  <el-button style='margin:20px 90px;' @click='successMsg' type="success">授权</el-button>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			
			<div class="rightSide">
				<div class="item">
					<span class="itemTitle" style="color:red; margin-bottom:20px; display: inline-block; width:100%; text-align: center;">{{Unauthorized.name}}权限详情</span>
					<img :src="Unauthorized.logoUrl" class="itemImg" alt="" />
				</div>
			</div>
	</div>
</template>
<script>
import { addImpower, checkLogin} from '../../api/api.js';
export default{
	name:"addImpower",
	data(){
		return{
			pageNumber: 1,
			pageSize: 10,
			Unauthorized:'',
			total: 0,
			biao:"应用类型",
			id:null,
		}
	},
	methods:{
		//应用授权
		successMsg() {
			let para ={
				id:this.id,
			}
			console.log("授权id",para);
			addImpower(para).then((res)=>{
				console.log('传来的数据,,,,',this.Unauthorized);
				if(res.code ==='0000'){
					 this.$message({
			          message: '授权成功！',
			          type: 'success'
			        });
			        this.$router.push('/apply/list');					
				}else if(res.code =='2003'){
					 this.$message({
			          message: '不能重复授权！',
			          type: 'error'
			        });					
				}else{
					 this.$message({
			          message: '授权失败！',
			          type: 'error'
			        });
				}
			});
      	}
	},
	mounted(){
		if(checkLogin(this)){
			var self = this;
			// 获取数据
			let Unauthorized = sessionStorage.getItem('Unauthorized');
			if(Unauthorized) {
				Unauthorized = JSON.parse(Unauthorized);
				self.Unauthorized = Unauthorized;
				self.id=Unauthorized.id;
			}
		}	
	}
}
</script>
<style scoped>
	 .img{ width:55%;float:left;}
	 .yy{ width:90%;margin-left:40px; }
	 .styl{ width:30%;height:100%;float:left;margin:20px;display:block;box-shadow:2px 2px 2px gray;background:#FFFFFF;border-radius:5%;padding:6px; }
		 .bottom {
		margin-top: 13px;
		line-height: 12px;
		}

		.button {
		padding: 0;
		float: right;
		}

		.image {
		width: 100%;
		display: block;

		}
		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}
		.clearfix:after {
			clear: both
		}
		.rightSide{
		    width: 200px;
		    float:right;
		    margin-top:-260px;
		    margin-right:200px;
		}
		.rightSide .item{
			width:200px;
			background-color:rgb(77, 182, 172);
			padding:10px;
		}
		.itemImg{
			display: block;
			width: 100px;
			height:100px;
			margin:0 auto;
		}
		.rightSide li{
			list-style: none;
		}
		ul>li{
			list-style:none;
		}
</style>